<template>
    <div>
        <div style="background: linear-gradient(#634046, #4C232B);">

            <van-nav-bar
                    style="background-color:rgba(0,0,0,0.5);"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft">
                <span slot="title" style="color: white">
                    电影
                </span>
            </van-nav-bar>

            <van-card
                    style="background-color:rgba(0,0,0,0);">
                <img :src="movieDetail.previewUrl"
                     style="width: 80px;height: 120px"
                     slot="thumb">

                <van-row slot="title" gutter="20">
                    <van-col span="20">
                        <span style="font-size: 15px;font-weight: bold;color: white" v-html="movieDetail.name"></span>
                    </van-col>
                </van-row>

                <van-row slot="desc">
                    <span style="font-size: 8px;color: gray">{{movieDetail.englishName}}</span>
                </van-row>

                <van-row slot="desc">
                    <span style="font-size: 8px;color: gray">{{movieDetail.movieTypes.toString().replaceAll(",","/")}}</span>
                </van-row>

                <van-row slot="desc">
                    <span style="font-size: 8px;color: gray">时长:{{movieDetail.duration}}分钟</span>
                </van-row>

                <van-row slot="desc">
                    <span style="font-size: 8px;color: gray">{{movieDetail.releaseDate.toString().substring(0,16).replace("T"," ")+'中国大陆上映'}}</span>
                </van-row>

                <van-row slot="desc">
                    <van-col v-if="movieDetail.whetherWatch==1 || movieDetail.whetherWatch==null" @click="wantSee()">
                        <van-button type="default"
                                    style="color:white;background-color:rgba(140,112,112,0.5);
                                    height: 30px;width: 90px;border-radius: 5px;border: none;font-size: 12px">
                            <van-icon name="like" color="white"/>
                            想看
                        </van-button>
                    </van-col>

                    <van-col v-if="movieDetail.whetherWatch==0" @click="wantSee()">
                        <van-button type="default"
                                    style="color:white;background-color:rgba(140,112,112,0.5);
                                    height: 30px;width: 90px;border-radius: 5px;border: none;font-size: 12px">
                            <van-icon name="like" color="red"/>
                            想看
                        </van-button>
                    </van-col>

                    <van-col style="margin-left: 10px" v-if="movieDetail.myMovieComments==null">
                        <van-button type="default"
                                    style="color:white;background-color:rgba(140,112,112,0.5);
                                    height: 30px;width: 90px;border-radius: 5px;border: none;font-size: 12px">
                            <van-icon name="star" color="white"/>
                            看过
                        </van-button>
                    </van-col>

                    <van-col style="margin-left: 10px" v-if="movieDetail.myMovieComments!=null">
                        <van-button type="default"
                                    style="color:white;background-color:rgba(140,112,112,0.5);
                                    height: 30px;width: 90px;border-radius: 5px;border: none;font-size: 12px">
                            <van-icon name="star" color="red"/>
                            看过
                        </van-button>
                    </van-col>
                </van-row>
            </van-card>

            <!--            评论系统 想看-->
            <div style="width: 90%;height: 80px;background-color:#3e1e23; margin-left: 5%;border-radius: 10px" v-if="new Date(movieDetail.releaseDate).getTime()<new Date()">
                <van-row>
                    <van-col offset="1">
                        <span style="font-size: 12px;color: white">猫眼电影购票评分</span>
                    </van-col>
                    <van-col offset="4">
                        <span style="font-size: 10px;color:#8C706F ">{{movieDetail.watchNumber}} 人想看</span>
                    </van-col>
                    <van-col offset="1">
                        <span style="font-size: 10px;color:#8C706F ">{{movieDetail.commentNumber}} 人看过</span>
                    </van-col>
                </van-row>

                <van-row gutter="20" style="margin-top: 10px">
                    <van-col offset="4">
                        <span style="color: white;">
                            评分:
                            <span style="color:#ffd21e;font-size: 14px">{{movieDetail.grade}}</span>
                        </span>
                    </van-col>
                    <van-col offset="">
                        <van-rate v-model="gradeValue"
                                  allow-half
                                  void-icon="star"
                                  color="#ffd21e"
                                  void-color="#eee"/>
                    </van-col>
                </van-row>
            </div>

            <div style="width: 90%;height: 80px;background-color:#3e1e23; margin-left: 5%;border-radius: 10px" v-if="new Date(movieDetail.releaseDate).getTime()>new Date()">
                <van-row>
                    <van-col offset="1">
                        <span style="font-size: 12px;color: white">猫眼想看</span>
                    </van-col>
                </van-row>
                <van-row gutter="20" style="margin-top: 10px">
                    <van-col offset="10">
                        <span style="color: white;">
                            <span style="color:#ffd21e;font-size: 20px;font-weight: bold">{{movieDetail.watchNumber}}</span>
                            人想看
                        </span>
                    </van-col>
                </van-row>
            </div>

            <van-row style="margin-top: 10px">
                <van-col offset="1">
                    <span style="color: white">简介</span>
                </van-col>
            </van-row>

            <van-row>
                <van-col offset="1" style="margin-right: 15px">
                    <div style="font-size: 12px;color: white;line-height: 18px" class="text-overflow">
                        {{movieDetail.synopsis}}
                    </div>
                </van-col>
            </van-row>

            <van-row style="margin-top: 10px">
                <van-col offset="1"><span style="color: white">演职人员</span></van-col>
            </van-row>
            <br/>
            <div style="height: 200px;margin-left: 15px">
                <mu-grid-list class="gridlist-inline-demo" :cols="4">
                    <mu-grid-tile v-for="movieActor in movieDetail.movieActors">
                        <img style="width: 100px;height: 110px" :src="movieActor.pictureUrl">
                        <span slot="title" style="font-size: 12px">{{movieActor.name}}</span>
                        <span slot="subTitle">{{movieActor.portray==null?'导演':movieActor.portray}}</span>
                    </mu-grid-tile>
                </mu-grid-list>
            </div>

            <van-row style="margin-top: 10px">
                <van-col offset="1"><span style="color: white">剧照</span></van-col>
            </van-row>
            <van-row style="margin-top: 10px;margin-left: 15px" class="gridlist-inline-demo">
                <img style="height: 200px;width: 300px" v-for="moviePicture in movieDetail.moviePictureSets"
                     :src="moviePicture.pictureUrl">
            </van-row>
        </div>

        <van-row style="margin-top: 20px">
            <van-col offset="1">
                <span style="font-weight: bold">观众热评</span>
            </van-col>
        </van-row>

        <div v-for="comment in movieDetail.movieComments">
            <van-row>
                <van-col offset="1" style="margin-top: 6px">
                    <van-image
                            round
                            width="30px"
                            height="30px"
                            :src="comment.headImgUrl"
                    />
                </van-col>
                <van-col offset="1">
                    <span style="font-size: 12px">{{comment.nickname}}</span>
                    <br/>
                    <van-rate
                            v-model="comment.level/2"
                            :size="8"
                            color="#ffd21e"
                            void-icon="star"
                            void-color="#eee"/>
                    <span style="margin-left: 5px;color:#ffd21e;font-size: 10px">{{comment.level}}分</span>
                </van-col>
            </van-row>
            <van-row>
                <van-col offset="4">
                    <div>
                        <span>{{comment.context}}</span>
                    </div>
                </van-col>
            </van-row>
            <van-row>
                <van-col offset="4">
                    <span style="font-size: 10px;color: gray">{{comment.createDate.toString().substring(0,10)}}</span>
                </van-col>
                <van-col style="margin-left: 50%">
                    <van-tag round plain text-color="gray" type="primary" size="medium" @click="giveLike(comment.id,comment)">
                        {{comment.num}}
                        <van-icon name="like" color="red" v-if="comment.whetherGiveLike"/>
                        <van-icon name="like-o" v-else/>
                    </van-tag>
                </van-col>
            </van-row>
        </div>

        <div style="height: 60px"></div>


        <van-button
                style="position: fixed;bottom: 0px"
                type="primary"
                color="red"
                round
                @click="buyTicket "
                size="large">特惠购票
        </van-button>
    </div>
</template>

<script>
    import movieApi from "../../api/movie";
    import {Toast} from 'vant';

    export default {
        name: "MovieDetail",
        data() {
            return {
                movieId: 0,        //电影id
                movieDetail: {     //电影详情信息
                    previewUrl: "",
                    movieTypes: [],
                    releaseDate: ""
                },
                gradeValue: 0      //电影评论级别

            }
        },
        created() {
            this.movieId = this.$route.params.id
            this.initData()
        },
        methods: {
            buyTicket(){
                this.$router.push("/cineamsList")
            },
            giveLike(commentId,comment){  //点赞
                movieApi.giveLike(commentId,this.movieId).then(response=>{
                    console.log(response);
                    if (response.data=="用户已点赞"){
                        comment.whetherGiveLike=true
                        comment.num=comment.num+1
                    }else {
                        comment.whetherGiveLike=false
                        comment.num=comment.num-1
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            wantSee() {
                movieApi.wantSee(this.movieId).then(response => {
                    if (response.data == "用户已观看") {
                        this.movieDetail.whetherWatch = 0
                    } else {
                        this.movieDetail.whetherWatch = 1
                    }
                }).catch(error=>{

                    Toast.fail(error.data.message);
                })
            },
            onClickLeft() {
                this.$router.go(-1)
            },
            initData() {
                movieApi.movieDetail(this.movieId).then(response => {
                    this.movieDetail = response.data
                    this.gradeValue = parseInt(response.data.grade) / 2;
                    console.log(this.movieDetail);
                }).catch(error => {
                    Toast.fail(error.data.message)
                })
            }
        },

    }
</script>

<style scoped>
    .gridlist-inline-demo {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .text-overflow {
        width: 100%;
        height: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
        -webkit-box-orient: vertical; /* 垂直排列 */
        word-break: break-all; /* 内容自动换行 */
    }


</style>